<template>
    <div class="content">
        <div class="search-line" style="margin-top: 10px; margin-left: 6px">
            <el-input placeholder="商品名称" prefix-icon="el-icon-search" v-model="content_search" style="width: 200px">
            </el-input>

            <div style="margin-top: 0px; margin-left: 20px">
                <div class="line2">
                    <!-- <span class="demonstration">默认 click 触发子菜单</span> -->
                    <el-cascader ref="sortCascader" v-model="sortValue" prop-name="name" :options="categoryTree"
                        :props="optionProps" @change="sortChange" placeholder="请选择类目"></el-cascader>
                </div>
            </div>

            <el-button type="primary" style="width: 80px; margin-left: 20px" @click="getGoodsData">查询</el-button>
            <el-button type="" style="
          width: 80px;
          margin-left: 20px;
          background-color: #4262ac;
          color: #fff;" @click="resetting">重置</el-button>
        </div>

        <div style="margin-top: 39px; margin-left: 6px">
            <el-tabs v-model="type" @tab-click="tabClick">
                <el-tab-pane label="全部商品" name="1">全部商品</el-tab-pane>
                <el-tab-pane label="已上架" name="2">已上架</el-tab-pane>
                <el-tab-pane label="待审核" name="3">待审核</el-tab-pane>
                <el-tab-pane label="审核通过" name="4">审核通过</el-tab-pane>
                <el-tab-pane label="审核未通过" name="5">审核未通过</el-tab-pane>
                <el-tab-pane label="推荐" name="6">推荐</el-tab-pane>
                <el-tab-pane label="已售完" name="7">已售完</el-tab-pane>
                <el-tab-pane label="已下架" name="8">已下架</el-tab-pane>
            </el-tabs>
        </div>

        <div style="margin-top: 15px; margin-left: 6px">
            <el-button type="" @click="putOnTheShelf"
                style="width: 60px; color: white; background-color: #4462aa">上架</el-button>
            <el-button type="" @click="putDownTheShelf" style="
          width: 60px;
          color: white;
          background-color: #293b69;
          margin-left: 16px;
        ">下架</el-button>
            <el-button type="" @click="deleteClick" style="
          width: 60px;
          color: white;
          background-color: #be0f01;
          margin-left: 16px;
        ">删除</el-button>
        </div>

        <div>
            <el-table border ref="multipleTable" :data="tableData" tooltip-effect="dark"
                style="width: 100%; margin-top: 20px; margin-left: 6px" @selection-change="handleSelectionChange" height="">
                <el-table-column type="selection" width="55" align="center">
                </el-table-column>
                <el-table-column prop="name" label="商品图片" width="180px" align="center">
                    <template slot-scope="scope">
                        <img :src="`${imgHead}${scope.row.cover}`" width="100px" height="70px" />
                    </template>
                </el-table-column>
                <el-table-column prop="name" label="商品名称" show-overflow-tooltip align="center">
                </el-table-column>
                <el-table-column label="创建时间" width="180px" align="center">
                    <template slot-scope="scope"><span>{{ scope.row.created_at }}</span></template>
                </el-table-column>
                <el-table-column label="更新时间" align="center" width="180px">
                    <template slot-scope="scope">{{ scope.row.updated_at }}</template>
                </el-table-column>
                <el-table-column label="所属类目" align="center" show-overflow-tooltip>
                    <template slot-scope="scope">
                        <span>{{ scope.row.category_one }}/{{ scope.row.category_two }}</span>
                    </template>
                </el-table-column>
                <el-table-column prop="inventory" label="库存" width="100px" align="center" show-overflow-tooltip>
                </el-table-column>
                <el-table-column prop="check" label="审核状态" align="center" width="100px" show-overflow-tooltip>
                    <template slot-scope="scope">{{
                        selectAuditStatus(scope.row.check)
                    }}</template>
                </el-table-column>
                <el-table-column label="上架状态" width="100px" align="center" show-overflow-tooltip>
                    <template slot-scope="scope">{{
                        scope.row.status == 0 ? "未上架" : "已上架"
                    }}</template>
                </el-table-column>

                <el-table-column fixed="right" label="操作" align="center" width="161px">
                    <template slot-scope="scope">
                        <el-button @click="lookClick(scope.row)" type="text" size="small">查看</el-button>
                        <el-button type="text" size="small" @click="editClick(scope.row)">编辑</el-button>
                        <el-button type="text" size="small" @click="itemDelete(scope.row)"
                            style="color: red;">删除</el-button>
                    </template>
                </el-table-column>
            </el-table>

            <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="page"
                :page-sizes="[10, 20, 30, 40]" :page-size="per_page" layout="total, sizes, prev, pager, next, jumper"
                :total="total">
            </el-pagination>
        </div>

        <el-dialog title="商品详情" :visible.sync="goodsDetailsShow">
            <el-form :model="currentRow">
                <div style="display: flex; flex-direction: column; ">
                    <div style="display: flex; margin-left: 76px">
                        <div style="width: 100px; text-align: right;margin-right: 28px;">商品图片：</div>
                        <div>
                            <div style="display: flex;">
                                <div v-for="(item, index)  in goodsImageForLook" :key="item" @mouseover="showDelete = index"
                                    @mouseleave="showDelete = false"
                                    style="position: relative; margin-left: 10px ;border: #ccc solid 1px;border-radius: 4px; width: 100px; height: 100px;">
                                    <img :src="`${imgHead}${item}`" width="100px" height="100px"
                                        style="  position: relative;" />
                                    <div v-show="showDelete === index && !isLook"
                                        style="width: 100px; height: 100px; background-color:#333 ;position: absolute;  top: 0; left: 0; opacity: 0.5;">
                                    </div>
                                    <i v-show="showDelete === index && !isLook" class="el-icon-delete"
                                        style="color:white; position: absolute;  top: 50%; left: 50%;"
                                        @click="deleteImg(index, item)"></i>
                                </div>
                            </div>

                            <el-upload v-if="!isLook" action="https://upload-z1.qiniup.com" list-type="picture-card"
                                :data="QiniuData" :http-request="upqiniu" :limit="limitNum"
                                :on-preview="handlePictureCardPreview" :on-remove="handleRemove" :on-error="uploadError"
                                :before-upload="beforeUpload" accept="image/jpeg, image/jpg, image/png"
                                :file-list="fileList" :on-success="uploadFiles" :on-exceed="onExceed"
                                style="margin-left: 10px; margin-top: 10px;">
                                <i class="el-icon-plus"></i>
                            </el-upload>
                            <el-dialog :visible.sync="dialogVisible">
                                <img width="100%" :src="dialogImageUrl" alt="">
                            </el-dialog>

                        </div>


                    </div>

                    <div style="display: flex; margin-left: 76px; margin-top: 26px;align-items: center;">
                        <div style="width: 100px; text-align: right">商品名称：</div>
                        <el-input placeholder="" v-model="currentRow.name" :disabled="isLook"
                            style="width: 320px;margin-left: 39px"></el-input>
                    </div>


                    <div class="dialog-goods-category"
                        style="display: flex; margin-left: 76px; margin-top: 26px;align-items: center;">
                        <div style="width: 100px; text-align: right">商品类目：</div>
                        <el-input v-if="isLook" placeholder="" v-model="currentRow.categoryOneAndTwo" :disabled="isLook"
                            style="width: 320px;margin-left: 39px"></el-input>

                        <el-cascader v-model="sortValue" v-if="!isLook" prop-name="name" :options="categoryTree"
                            :props="optionProps" @change="sortChange" :placeholder="firstSort"
                            style="width: 320px;margin-left: 39px"></el-cascader>

                    </div>

                    <div style="display: flex; margin-left: 76px; margin-top: 26px;align-items: center;">
                        <div style="width: 100px; text-align: right">创建时间：</div>
                        <el-input placeholder="" v-model="currentRow.created_at" :disabled="isLook"
                            style="width: 320px;margin-left: 39px "></el-input>
                    </div>

                    <div style="display: flex; margin-left: 76px; margin-top: 26px;align-items: center;">
                        <div style="width: 100px; text-align: right">更新时间：</div>
                        <el-input placeholder="" v-model="currentRow.updated_at" :disabled="isLook"
                            style="width: 320px;margin-left: 39px "></el-input>
                    </div>

                    <div style="display: flex; margin-left: 76px; margin-top: 26px;align-items: center;">
                        <div style="width: 100px; text-align: right">前端价格：</div>
                        <el-input type="number" step="0.01" placeholder="" v-model="currentRow.original_price"
                            :disabled="isLook" style="width: 320px;margin-left: 39px "></el-input>
                    </div>

                    <div style="display: flex; margin-left: 76px; margin-top: 26px;align-items: center;">
                        <div style="width: 100px; text-align: right">结算价格：</div>
                        <el-input type="number" step="0.01" placeholder="" v-model="currentRow.price" :disabled="isLook"
                            style="width: 320px;margin-left: 39px "></el-input>
                    </div>


                    <div style="display: flex; margin-left: 76px; margin-top: 26px;align-items: center;">
                        <div style="width: 100px; text-align: right">毛重：</div>
                        <el-input placeholder="" v-model="currentRow.gross_weight" :disabled="isLook"
                            style="width: 320px;margin-left: 39px "></el-input>
                    </div>

                    <div style="display: flex; margin-left: 76px; margin-top: 26px;align-items: center;">
                        <div style="width: 100px; text-align: right">商品规格：</div>
                        <div style="margin-left: 39px ">
                            <el-radio-group v-model="currentRow.specification" style="margin-top: 15px;">
                                <el-radio v-for="spec in specifications" :label="spec.id" :key="spec.id"
                                    :disabled="isLook">{{
                                        spec.name }}</el-radio>
                            </el-radio-group>
                        </div>
                    </div>

                    <div style="display: flex; margin-left: 76px; margin-top: 26px;align-items: center;">
                        <div style="width: 100px; text-align: right">运费设置：</div>
                        <el-select v-model="currentRow.express_template" placeholder="请选择" :disabled="isLook"
                            style="margin-left: 39px;">
                            <el-option v-for="item in expressTemplates" :key="item.id" :label="item.name" :value="item.id">
                            </el-option>
                        </el-select>
                    </div>



                    <div style="display: flex; margin-left: 76px; margin-top: 26px;align-items: center;">
                        <div style="width: 100px; text-align: right">其他设置：</div>
                        <template>
                            <el-checkbox v-model="isIndexShow" style="margin-left: 39px;"
                                :disabled="isLook">首页推荐</el-checkbox>
                        </template>
                    </div>


                    <div style="display: flex; margin-left: 76px; margin-top: 26px;">
                        <div style="width: 100px; text-align: right">商品详情：</div>
                        <div style="margin-left: 39px; display: flex; flex-direction: column;">
                            <!-- <img :src="`${imgHead}${item}`" width="319px" height="290px" style="margin-top: 6px;"
                                v-for="item in goodsImageForLook" :key="item" /> -->



                        </div>

                    </div>
                    <div v-if="isLook" v-html="this.currentRow.content" style="margin-left: 180px;"></div>
                    <div v-else="isLook">
                        <goodsEditor @changeTxt="changeTxt" :qiNiuToken="QiniuData.token" :html="html"
                            style="margin-left: 120px; margin-top: 15px; margin-right: 15px;" />

                    </div>


                </div>
            </el-form>
            <div slot="footer" v-if="!isLook">
                <el-button @click="goodsDetailsShow = false">取 消</el-button>
                <el-button type="primary" @click="commitEdit">确 定</el-button>
            </div>
        </el-dialog>
    </div>
</template>

<script>
import { Alert } from "element-ui";
import { get, patch, post, put, del } from "@/utils/request";
import { url } from "@/utils/url";
import goodsEditor from "./goodsEditor";

export default {
    components: { goodsEditor },
    data() {
        return {
            categoryTree: [{
                value: 'zhinan',
                label: '指南',
                children: [{
                    value: 'shejiyuanze',
                    label: '设计原则',
                    children: [{
                        value: 'yizhi',
                        label: '一致',

                        children: [{
                            value: 'xiaoyizhi',
                            label: '小一直',
                        },
                        {
                            value: 'wanquanyizhi',
                            label: '完全一致',
                        }
                        ]


                    }, {
                        value: 'fankui',
                        label: '反馈'
                    }, {
                        value: 'xiaolv',
                        label: '效率'
                    }, {
                        value: 'kekong',
                        label: '可控'
                    }]
                }, {
                    value: 'daohang',
                    label: '导航',
                    children: [{
                        value: 'cexiangdaohang',
                        label: '侧向导航'
                    }, {
                        value: 'dingbudaohang',
                        label: '顶部导航'
                    }]
                }]
            }, {
                value: 'zujian',
                label: '组件',
                children: [{
                    value: 'basic',
                    label: 'Basic',
                    children: [{
                        value: 'layout',
                        label: 'Layout 布局'
                    }, {
                        value: 'color',
                        label: 'Color 色彩'
                    }, {
                        value: 'typography',
                        label: 'Typography 字体'
                    }, {
                        value: 'icon',
                        label: 'Icon 图标'
                    }, {
                        value: 'button',
                        label: 'Button 按钮'
                    }]
                }, {
                    value: 'form',
                    label: 'Form',
                    children: [{
                        value: 'radio',
                        label: 'Radio 单选框'
                    }, {
                        value: 'checkbox',
                        label: 'Checkbox 多选框'
                    }, {
                        value: 'input',
                        label: 'Input 输入框'
                    }, {
                        value: 'input-number',
                        label: 'InputNumber 计数器'
                    }, {
                        value: 'select',
                        label: 'Select 选择器'
                    }, {
                        value: 'cascader',
                        label: 'Cascader 级联选择器'
                    }, {
                        value: 'switch',
                        label: 'Switch 开关'
                    }, {
                        value: 'slider',
                        label: 'Slider 滑块'
                    }, {
                        value: 'time-picker',
                        label: 'TimePicker 时间选择器'
                    }, {
                        value: 'date-picker',
                        label: 'DatePicker 日期选择器'
                    }, {
                        value: 'datetime-picker',
                        label: 'DateTimePicker 日期时间选择器'
                    }, {
                        value: 'upload',
                        label: 'Upload 上传'
                    }, {
                        value: 'rate',
                        label: 'Rate 评分'
                    }, {
                        value: 'form',
                        label: 'Form 表单'
                    }]
                }, {
                    value: 'data',
                    label: 'Data',
                    children: [{
                        value: 'table',
                        label: 'Table 表格'
                    }, {
                        value: 'tag',
                        label: 'Tag 标签'
                    }, {
                        value: 'progress',
                        label: 'Progress 进度条'
                    }, {
                        value: 'tree',
                        label: 'Tree 树形控件'
                    }, {
                        value: 'pagination',
                        label: 'Pagination 分页'
                    }, {
                        value: 'badge',
                        label: 'Badge 标记'
                    }]
                }, {
                    value: 'notice',
                    label: 'Notice',
                    children: [{
                        value: 'alert',
                        label: 'Alert 警告'
                    }, {
                        value: 'loading',
                        label: 'Loading 加载'
                    }, {
                        value: 'message',
                        label: 'Message 消息提示'
                    }, {
                        value: 'message-box',
                        label: 'MessageBox 弹框'
                    }, {
                        value: 'notification',
                        label: 'Notification 通知'
                    }]
                }, {
                    value: 'navigation',
                    label: 'Navigation',
                    children: [{
                        value: 'menu',
                        label: 'NavMenu 导航菜单'
                    }, {
                        value: 'tabs',
                        label: 'Tabs 标签页'
                    }, {
                        value: 'breadcrumb',
                        label: 'Breadcrumb 面包屑'
                    }, {
                        value: 'dropdown',
                        label: 'Dropdown 下拉菜单'
                    }, {
                        value: 'steps',
                        label: 'Steps 步骤条'
                    }]
                }, {
                    value: 'others',
                    label: 'Others',
                    children: [{
                        value: 'dialog',
                        label: 'Dialog 对话框'
                    }, {
                        value: 'tooltip',
                        label: 'Tooltip 文字提示'
                    }, {
                        value: 'popover',
                        label: 'Popover 弹出框'
                    }, {
                        value: 'card',
                        label: 'Card 卡片'
                    }, {
                        value: 'carousel',
                        label: 'Carousel 走马灯'
                    }, {
                        value: 'collapse',
                        label: 'Collapse 折叠面板'
                    }]
                }]
            }, {
                value: 'ziyuan',
                label: '资源',
                children: [{
                    value: 'axure',
                    label: 'Axure Components'
                }, {
                    value: 'sketch',
                    label: 'Sketch Templates'
                }, {
                    value: 'jiaohu',
                    label: '组件交互文档'
                }]
            }],
            sortValue: [],
            optionProps: {
                value: "id",
                label: "name",
                children: "children",
            },
            html: '<p>这是一个带有图片的富文本。</p>  <img src="https://hao123-static.cdn.bcebos.com/cms/2023-12/1702282276711/b52971d8a7e7.png">',
            isIndexShow: true,
            radio: '1',
            selectedRadio: "全部商品",
            page: 1,
            type: "1",
            per_page: 10,
            firstSort: '',
            showDelete: false,//鼠标悬浮删除显示
            goodsImageForLook: [],
            currentRow: {
                name: '',
                images: [],
                categoryOneAndTwo: '',
                category_one: '',
                category_two: '',
                original_price: '',
                price: '',
                gross_weight: '',
                specification: '',
                express_template: ''
            },
            goodsDetailsShow: false,
            isLook: true,
            expressTemplates: [],
            specifications: [],

            QiniuData: {    //这里是直接绑定data的值
                key: "", //图片名字处理
                token: "", //七牛云token
                data: {},
                bucket: "fyjyg"
            },

            limitNum: 5,


            options: [
                {
                    value: "选项1",
                    label: "黄金糕",
                },
                {
                    value: "选项2",
                    label: "双皮奶",
                },
                {
                    value: "选项3",
                    label: "蚵仔煎",
                },
                {
                    value: "选项4",
                    label: "龙须面",
                },
                {
                    value: "选项5",
                    label: "北京烤鸭",
                },
            ],


            optionProps: {
                value: "id",
                label: "name",
                children: "children",
            },

            fileList: [],

            categoryTree: [
                {
                    value: "zhinan",
                    label: "指南",
                    children: [
                        {
                            value: "shejiyuanze",
                            label: "设计原则",
                            children: [
                                {
                                    value: "yizhi",
                                    label: "一致",

                                    children: [
                                        {
                                            value: "xiaoyizhi",
                                            label: "小一直",
                                        },
                                        {
                                            value: "wanquanyizhi",
                                            label: "完全一致",
                                        }, 7
                                    ],
                                },
                                {
                                    value: "fankui",
                                    label: "反馈",
                                },
                                {
                                    value: "xiaolv",
                                    label: "效率",
                                },
                                {
                                    value: "kekong",
                                    label: "可控",
                                },
                            ],
                        },
                        {
                            value: "daohang",
                            label: "导航",
                            children: [
                                {
                                    value: "cexiangdaohang",
                                    label: "侧向导航",
                                },
                                {
                                    value: "dingbudaohang",
                                    label: "顶部导航",
                                },
                            ],
                        },
                    ],
                },
                {
                    value: "zujian",
                    label: "组件",
                    children: [
                        {
                            value: "basic",
                            label: "Basic",
                            children: [
                                {
                                    value: "layout",
                                    label: "Layout 布局",
                                },
                                {
                                    value: "color",
                                    label: "Color 色彩",
                                },
                                {
                                    value: "typography",
                                    label: "Typography 字体",
                                },
                                {
                                    value: "icon",
                                    label: "Icon 图标",
                                },
                                {
                                    value: "button",
                                    label: "Button 按钮",
                                },
                            ],
                        },
                        {
                            value: "form",
                            label: "Form",
                            children: [
                                {
                                    value: "radio",
                                    label: "Radio 单选框",
                                },
                                {
                                    value: "checkbox",
                                    label: "Checkbox 多选框",
                                },
                                {
                                    value: "input",
                                    label: "Input 输入框",
                                },
                                {
                                    value: "input-number",
                                    label: "InputNumber 计数器",
                                },
                                {
                                    value: "select",
                                    label: "Select 选择器",
                                },
                                {
                                    value: "cascader",
                                    label: "Cascader 级联选择器",
                                },
                                {
                                    value: "switch",
                                    label: "Switch 开关",
                                },
                                {
                                    value: "slider",
                                    label: "Slider 滑块",
                                },
                                {
                                    value: "time-picker",
                                    label: "TimePicker 时间选择器",
                                },
                                {
                                    value: "date-picker",
                                    label: "DatePicker 日期选择器",
                                },
                                {
                                    value: "datetime-picker",
                                    label: "DateTimePicker 日期时间选择器",
                                },
                                {
                                    value: "upload",
                                    label: "Upload 上传",
                                },
                                {
                                    value: "rate",
                                    label: "Rate 评分",
                                },
                                {
                                    value: "form",
                                    label: "Form 表单",
                                },
                            ],
                        },
                        {
                            value: "data",
                            label: "Data",
                            children: [
                                {
                                    value: "table",
                                    label: "Table 表格",
                                },
                                {
                                    value: "tag",
                                    label: "Tag 标签",
                                },
                                {
                                    value: "progress",
                                    label: "Progress 进度条",
                                },
                                {
                                    value: "tree",
                                    label: "Tree 树形控件",
                                },
                                {
                                    value: "pagination",
                                    label: "Pagination 分页",
                                },
                                {
                                    value: "badge",
                                    label: "Badge 标记",
                                },
                            ],
                        },
                        {
                            value: "notice",
                            label: "Notice",
                            children: [
                                {
                                    value: "alert",
                                    label: "Alert 警告",
                                },
                                {
                                    value: "loading",
                                    label: "Loading 加载",
                                },
                                {
                                    value: "message",
                                    label: "Message 消息提示",
                                },
                                {
                                    value: "message-box",
                                    label: "MessageBox 弹框",
                                },
                                {
                                    value: "notification",
                                    label: "Notification 通知",
                                },
                            ],
                        },
                        {
                            value: "navigation",
                            label: "Navigation",
                            children: [
                                {
                                    value: "menu",
                                    label: "NavMenu 导航菜单",
                                },
                                {
                                    value: "tabs",
                                    label: "Tabs 标签页",
                                },
                                {
                                    value: "breadcrumb",
                                    label: "Breadcrumb 面包屑",
                                },
                                {
                                    value: "dropdown",
                                    label: "Dropdown 下拉菜单",
                                },
                                {
                                    value: "steps",
                                    label: "Steps 步骤条",
                                },
                            ],
                        },
                        {
                            value: "others",
                            label: "Others",
                            children: [
                                {
                                    value: "dialog",
                                    label: "Dialog 对话框",
                                },
                                {
                                    value: "tooltip",
                                    label: "Tooltip 文字提示",
                                },
                                {
                                    value: "popover",
                                    label: "Popover 弹出框",
                                },
                                {
                                    value: "card",
                                    label: "Card 卡片",
                                },
                                {
                                    value: "carousel",
                                    label: "Carousel 走马灯",
                                },
                                {
                                    value: "collapse",
                                    label: "Collapse 折叠面板",
                                },
                            ],
                        },
                    ],
                },
                {
                    value: "ziyuan",
                    label: "资源",
                    children: [
                        {
                            value: "axure",
                            label: "Axure Components",
                        },
                        {
                            value: "sketch",
                            label: "Sketch Templates",
                        },
                        {
                            value: "jiaohu",
                            label: "组件交互文档",
                        },
                    ],
                },
            ],

            content_search: "",
            type_value: "",
            imgHead: url.imgHead,
            tableData: [],
            multipleSelection: [],
            selectedRows: [],
            status_name: "first",
            category_one: '',
            category_two: '',
        };
    },

    methods: {

        //列表点击删除
        itemDelete(row) {

            this.$alert('确定删除' + row.name + "吗", "温馨提示", {
                confirmButtonText: "确定",
                callback: action => {
                    if (action == 'cancel') {
                        console.log('点击取消了')
                        return
                    }
                    console.log('执行确认')
                    let id = row.id;
                    let type = 1;
                    del(url.adminGoods, {
                        id: id,
                        type: type
                    }).then((response) => {
                        this.$message({
                            message: response.msg,
                            type: "info",
                        });
                        this.getGoodsData();
                    })
                        .catch((error) => {
                            console.error(error); // 在这里处理错误
                        });


                }
            });         

        },
        resetting() {
            //重置
            this.category_one = ''
            this.category_two = ''
            this.$refs.sortCascader.$refs.panel.clearCheckedNodes()
            this.content_search = ''

        },

        sortChange(params) {
            console.log("当前分类的sort是=====>" + params)
            console.log("当前分类的sortValue是=====>" + this.sortValue)
            this.category_one = 0;//重置
            this.category_two = 0;//重置
            params.forEach((option, index) => {
                console.log(`当前分类的sort是=====Level ${index}: ${option}`); // 输出每个级联的值和层级  
                if (index == 0) {
                    this.category_one = option
                } else if (index == 1) {
                    this.category_two = option
                }
            });
        },

        deleteImg(index, item) {
            console.log('item的值：' + JSON.stringify(item))
            console.log('this.goodsImageForLook的值：' + JSON.stringify(this.goodsImageForLook))
            this.currentRow.images.splice(index, 1) //删除currentRow 中对应的图片
            this.goodsImageForLook = this.goodsImageForLook.filter(obj => obj !== item) //删除goodsImageForLook 对应的图 ,会删除列表中同名的图片

            console.log('当前deleteImg执行后  this.currentRow.images是：' + JSON.stringify(this.currentRow.images))

        },

        handleRemove(file, fileList) {
            console.log('当前el-upload remove执行 file 的值为：' + JSON.stringify(file))
            console.log('当前el-upload remove执行 fileList 的值为：' + JSON.stringify(fileList))
            console.log('当前el-upload remove执行 当前删除的图片是：' + JSON.stringify(file.response.key))
            this.currentRow.images = this.currentRow.images.filter(obj => obj !== file.response.key); // 创建新列表，不包含要删除的对象
            console.log('当前el-upload remove执行后  this.currentRow.images是：' + JSON.stringify(this.currentRow.images))
        },

        selectType(label) {
            console.log(label + "------------》");
        },
        selectAuditStatus(auditStatus) {
            switch (auditStatus) {
                case 0:
                    return "待审核";
                case 1:
                    return "审核通过";
                case 2:
                    return "审核未通过";
            }
        },
        handleSelectionChange(rows) {
            this.selectedRows = rows;
            console.log(this.selectedRows);
        },

        //下架
        putDownTheShelf() {
            if (this.selectedRows.length === 0) {
                this.$message({
                    message: "请选择下架的货品",
                    type: "error",
                });

                return;
            }

            if (this.selectedRows.length > 1) {
                this.$message({
                    message: "请选择单个货品",
                    type: "error",
                });
                return;
            }

            if (this.selectedRows[0].check != 1) {
                //未通过审核
                this.$message({
                    message: "未通过审核的商品不可进行上下架操作",
                    type: "error",
                });
                return;
            }

            let id = this.selectedRows[0].id;
            let type = 2;
            let check = "";
            let status = 0;
            this.putOnDownCheck(id, type, check, status);
        },

        //上架
        putOnTheShelf() {
            if (this.selectedRows.length === 0) {
                this.$message({
                    message: "请选择要上架的货品",
                    type: "error",
                });

                return;
            }

            if (this.selectedRows.length > 1) {
                this.$message({
                    message: "请选择单个货品",
                    type: "error",
                });
                return;
            }

            if (this.selectedRows[0].check != 1) {
                //未通过审核
                this.$message({
                    message: "未通过审核的商品不可进行上下架操作",
                    type: "error",
                });
                return;
            }

            let id = this.selectedRows[0].id;
            let type = 2;
            let check = "";
            let status = 1;
            this.putOnDownCheck(id, type, check, status);
        },

        //上下架 操作
        putOnDownCheck(id, type, check, status) {
            patch(url.adminGoods, {
                id: id,
                type: type,
                check: check,
                status: status,
            }).then((response) => {
                this.$message({
                    message: response.msg,
                    type: "info",
                });
                this.getGoodsData();
            })
                .catch((error) => {
                    console.error(error); // 在这里处理错误
                });
        },

        //删除
        deleteClick() {
            if (this.selectedRows.length === 0) {
                this.$message({
                    message: "请选择要删除的货品",
                    type: "error",
                });

                return;
            }

            if (this.selectedRows.length > 1) {
                this.$message({
                    message: "请选择单个删除",
                    type: "error",
                });

                return;
            }

            let id = this.selectedRows[0].id
            del(url.adminGoods, {
                id: id,
                type: 1
            }).then((response) => {
                this.$message({
                    message: response.msg,
                    type: "info",
                });
                this.getGoodsData();
            })
                .catch((error) => {
                    console.error(error); // 在这里处理错误
                });


        },
        handleSizeChange(val) {
            console.log(`每页 ${val} 条`);
            this.per_page = val;
            this.getGoodsData();
        },
        handleCurrentChange(val) {
            console.log(`当前页: ${val}`);
            this.page = val;
            this.getGoodsData();
        },
        tabClick(tab) {
            console.log(tab.name);
            this.type = tab.name;
            this.getGoodsData();
        },

        getImage(row) {
            let image = this.imgHead + row;
            return image;
        },

        getGoodsData() {
            get(url.goods, {
                page: this.page,
                per_page: this.per_page,
                type: this.type,
                name: this.content_search,
                category_one: this.category_one,
                category_two: this.category_two,
            }).then((response) => {
                this.tableData = response.data.data;
                this.total = response.data.total;
            })
                .catch((error) => {
                    console.error(error); // 在这里处理错误
                });
        },

        //获取所有快递模板
        getExpressTemplates() {
            get(url.expressTemplates, {
                page: 1,
                per_page: 1000,
            }).then((response) => {
                this.expressTemplates = response.data.data;
            })
                .catch((error) => {
                    console.error(error); // 在这里处理错误
                });
        },
        //获取所有规格
        getSpecs() {
            get(url.specifications, {
                name: '',
                page: 1,
                per_page: 1000
            }).then(response => {
                let data = response.data
                this.specifications = data.data

            }).catch(error => {
                console.error(error); // 在这里处理错误  
            });
        },


        //获取规格
        getCategory() {
            get(url.categoryTree, {
                name: '',
                page: 1,
                per_page: 1000
            }).then(response => {
                let data = response.data
                this.categoryTree = data

            }).catch(error => {
                console.error(error); // 在这里处理错误  
            });
        },




        //
        lookClick(row) {
            this.isLook = true
            get(url.adminGoods, {
                id: row.id,

            }).then((response) => {
                this.currentRow = response.data;
                let currentImages = _.cloneDeep(response.data.images); //深拷贝
                this.goodsImageForLook = currentImages
                this.currentRow.categoryOneAndTwo = this.currentRow.category_one_name + '/' + this.currentRow.category_two_name;
                this.isIndexShow = this.currentRow.recommend == 1  //商品详情首页是否展示变量
                this.goodsDetailsShow = true;
                this.checked = true
            }).catch((error) => {
                console.error(error); // 在这里处理错误
            });

        },

        editClick(row) {
            this.currentRow = null
            this.isLook = false
            this.sortValue = []
            get(url.adminGoods, {
                id: row.id,

            }).then((response) => {
                this.currentRow = response.data;
                let currentImages = _.cloneDeep(response.data.images); //深拷贝
                this.goodsImageForLook = currentImages
                this.currentRow.categoryOneAndTwo = this.currentRow.category_one_name + '/' + this.currentRow.category_two_name;
                this.firstSort = this.currentRow.category_one_name + '/' + this.currentRow.category_two_name;
                console.log(">>>>>>>>>>>>>>>>????????????>>>>>>>>" + this.currentRow.categoryOneAndTwo)
                this.isIndexShow = this.currentRow.recommend == 1  //商品详情首页是否展示变量
                this.goodsDetailsShow = true;
                if (this.goodsImageForLook != null) {
                    this.limitNum = 5 - this.goodsImageForLook.length
                    this.$message('当前还能上传：' + this.limitNum)
                } else {
                    this.limitNum = 5
                }
                this.html = this.currentRow.content
            }).catch((error) => {
                console.error(error); // 在这里处理错误
            });

        },


        sortChange(params) {
            console.log("当前分类的sort是=====>" + params)
            console.log("当前分类的sortValue是=====>" + this.sortValue)
            this.category_one = 0;//重置
            this.category_two = 0;//重置
            params.forEach((option, index) => {
                console.log(`当前分类的sort是=====Level ${index}: ${option}`); // 输出每个级联的值和层级  
                if (index == 0) {
                    this.category_one = option
                } else if (index == 1) {
                    this.category_two = option
                }
            });
        },


        categoryOneAndTwo() {
            return this.currentRow.category_one + '/' + this.currentRow.category_two;
        },


        onExceed() {
            // this.$alert("sssssssssssssssssssss", "温馨提示", {
            //     confirmButtonText: "确定",
            // }).then(() => {
            //        console.log('woshinidie')
            // });

            this.$alert('一个商品最多上传5张到图集', "温馨提示", {
                confirmButtonText: "确定",
                callback: action => {
                    console.log('quxiaole')
                }
            });

        },


        //获取七牛云token 
        getQiNiuToken() {
            get(url.qiniuToken, {
            }).then(response => {
                this.QiniuData.token = response.data.uptoken
            }).catch(error => {

            });
        },


        beforeUpload(file) {
            // console.log(file);
            let suffix = file.name;
            // let key = "upload/009/" + encodeURI(`${suffix}`);
            //   let key = encodeURI(`${suffix}`)
            let key = `image/public/goodsPic/pic_${new Date().getTime()}_${file.name}`

            // let key = new Date () + Math.floor(Math.random()*100) + encodeURI(`${suffix}`)
            this.QiniuData.key = key;
            return this.QiniuData;
        },

        uploadError(error) {
            console.log('uploadError执行了 上传图片失败的原因： ' + JSON.stringify(error))
        },
        uploadFiles(res, file, fileList) {
            console.log('上传成功：' + JSON.stringify(res.key))
            console.log('fileList:==========' + JSON.stringify(fileList))
            let image = res.key
            this.currentRow.images.push(image)

            console.log("现在currentRow.images 的值 为：" + JSON.stringify(this.currentRow.images))
        },

        //提交商品编辑
        commitEdit() {
            let row = this.currentRow
            put(url.adminGoods, {
                id: row.id,
                name: row.name,
                images: row.images.join(','),
                category_one: row.category_one,
                category_two: row.category_two,
                original_price: row.original_price,
                price: row.price,
                gross_weight: row.gross_weight,
                content: row.content,
                specification: row.specification,
                express_template: row.express_template,
                recommend: this.isIndexShow ? '1' : '0',
                content: this.html

            }).then((response) => {
                this.fileList = [] //清空 
                this.goodsDetailsShow = false;
            }).catch((error) => {
                console.error(error); // 在这里处理错误
            });
        },


        changeTxt(editDataHtml) {
            this.html = editDataHtml
            console.log("changeTxt：" + editDataHtml)
        },


    },
    mounted() {
        console.log(
            "goods---mounted方法执行-----------------------》" + this.imageHead
        );
        this.getGoodsData();
        this.getExpressTemplates();
        this.getSpecs();
        this.getCategory();
        this.getQiNiuToken();
    },
};
</script>

<style lang="scss">
.content {
    overflow: auto;
    background: white;
    flex-direction: column;
    width: 100%;
    border-radius: 5px;
    border: solid 6px #f5f5f5;

    .head {
        flex-direction: column;
        display: flex;
        align-items: left;
    }

    .search-line {
        display: flex;
        align-items: center;
    }

    .dialog-goods-category {
        .el-input__inner::-webkit-input-placeholder {
            color: #333;
            /* 设置placeholder的颜色 */
            font-size: 13px;
            /* 设置placeholder的字体大小 */
        }
    }




    //上传图片框样式
    .el-upload--picture-card {
        border: 1px dashed #13C3C7;
    }

    .el-upload--picture-card:hover {
        border-color: #13C3C7;
        color: #13C3C7;
    }

    .el-upload--picture-card {
        width: 100px;
        height: 100px;
        font-size: 16px !important;
    }

    .el-upload {
        width: 100px;
        height: 100px;
        line-height: 100px;
        font-size: 16px;
    }

    .el-upload-list--picture-card .el-upload-list__item {
        width: 100px;
        height: 100px;
    }

    .el-upload-list--picture-card .el-upload-list__item-actions:hover {
        opacity: 1;
        font-size: 16px;
    }
}
</style>